\section{jQuery案例}

\subsection{回到顶部}
原理：scroll()事件触发后，判断位置，根据位置显示或隐藏按钮，点击后通过设置scrollTop()方法达到返回顶部的效果。

\begin{lstlisting}
$(function() {
    var b = $('#toTop');
    $(window).scroll(function() {
        100 < $(this).scrollTop() ? b.fadeIn() : b.fadeOut()
    });
    b.click(function(e) {
            e.preventDefault();
            $("body, html").animate({
                scrollTop: 0
            }, 1000);
        })
});
\end{lstlisting}

其中用到了window对象的scroll事件，另外有一个小细节，当图片被点击后，使用事件对象的preventDefault()方法阻止了超级链接的默认行为。

\subsection{图片轮播}

原理：先将图片通过改变定位方式隐藏起来，然后通过setInterval()方法改变z-index属性，使之显示出来。

\lstinputlisting{example/jQuery/slide.html}

\subsection{全选与取消全选}

在某些情况下，我们需要快速选择所有条目或者取消选择，利用jQuery提供的each()方法和prop()方法，可以方便得达到以上目的，先利用each()方法为符合条件的元素快速逐一增添方法，而利用prop()方法或者attr()方法获取或设置元素的属性。

\lstinputlisting{example/jQuery/checkAll.html}

在这个案例中，如果我们使用attr()方法，会发现脚本运行结果与预想的不一致，为了理解运行结果，我们有必要深入了解attr()方法和prop()方法之间的区别。\cite{jQueryFoundation，2015a}attributes和properties之间的差异在特定情况下是很重要。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值，而 .attr() 方法返回 attributes 的值。

例如HTML标记中定义的以下DOM元素
\begin{lstlisting}
<input type="checkbox" checked="checked" />
\end{lstlisting}
假设它是一个JavaScript变量命名的elem，input元素的checked特性（attribute）值不会因为复选框的状态而改变，而checked属性（property）会因为复选框的状态而改变。自定义的属性对于attribute和property是互不干扰的，但是对于DOM自带的属性就共享了，因此，跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该属性（property）。

% Table generated by Excel2LaTeX from sheet 'Sheet1'
\begin{table}[htbp]
  \centering
  \caption{.prop()和.attr()运行结果对比}
    \begin{tabular}{ll}
    \toprule
    elem.checked & true (Boolean) 将随着复选框状态的改变而改变 \\
    \$(elem).prop("checked") & true (Boolean) 将随着复选框状态的改变而改变 \\
    elem.getAttribute("checked") & "checked" (String) 复选框的初始状态;不会改变 \\
    \$(elem).attr("checked") (1.6) & "checked" (String) 复选框的初始状态;不会改变 \\
    \bottomrule
    \end{tabular}%
  \label{tab:.prop()和.attr()对比}%
\end{table}%


